<template>
  <Table
    :class="$style.table"
    size="middle"
    :dataSource="value"
    :pagination="false"
    tableLayout="fixed"
    :scroll="{ x: 'auto' }"
  >
    <TableColumn
      v-for="f in field.children"
      :key="f.prop"
      :customCell="f.extra?.customCell"
      :data-index="f.prop"
      :fixed="f.extra?.fixed"
      :width="f.extra?.width || 120"
    >
      <template #title
        ><span v-if="f.required && !display" :class="$style.required">*</span
        >{{ f.label }}</template
      >
      <template #default="{ index }">
        <DiFormItem cell :field="f" :path="path.concat([index, f.prop])" />
      </template>
    </TableColumn>
    <TableColumn v-if="!display && performance" :width="80" dataIndex="action" fixed="right">
      <template #default="{ record, index }">
        <div :class="$style.actionIcons">
          <PlusCircleOutlined @click="handleTableAdd(record, index)" />
          <MinusCircleOutlined @click="handleTableDel(record, index)" />
          <CopyOutlined @click="handleTableAdd(record, index, true)" />
        </div>
      </template>
    </TableColumn>
    <TableColumn v-if="!display && !disabledDel" :width="60" dataIndex="_action">
      <template #default="{ index }">
        <a style="line-height: 32px" @click="handleDelete(index)">删除</a>
      </template>
    </TableColumn>
    <template #footer
      ><Button v-if="!display && !disabledAdd" type="dashed" style="width: 100%" @click="handleAdd">
        <PlusOutlined /> 添加一行
      </Button>
    </template>
    <template v-for="itemSlot in Object.keys($slots)" :key="itemSlot" v-slot:[itemSlot]="temp">
      <slot :name="itemSlot" v-bind="temp"></slot>
    </template>
  </Table>
</template>
<script setup lang="ts">
import { Button, Form, Table, TableColumn } from 'ant-design-vue';
import { onMounted, useCssModule, watch } from 'vue';
import DiFormItem from './DiFormItem.vue';
import {
  CopyOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue';

const props = withDefaults(
  defineProps<{
    field: any;
    display?: boolean;
    path: string[];
    watchFunc?: Function;
    disabledAdd?: boolean;
    disabledDel?: boolean;
    minLength?: number;
    performance?: boolean;
    watchImmediate?: boolean;
  }>(),
  {}
);

const value = defineModel<any[]>('value', { default: () => [] });
if (props.watchFunc) {
  watch(
    value,
    () => {
      props.watchFunc && props.watchFunc(value.value);
    },
    { deep: true, immediate: props.watchImmediate }
  );
}
onMounted(() => {
  if (props.minLength && value.value.length < props.minLength) {
    value.value = value.value.concat(
      Array.from(new Array(props.minLength - value.value.length)).map(() => ({}))
    );
  }
});

function handleDelete(index: number) {
  value.value = value.value.filter((t, i) => i != index);
}
function handleAdd() {
  value.value = value.value.concat({});
}
const formItemContext = Form.useInjectFormItemContext();
watch(value, () => {
  formItemContext.onFieldChange();
});
const $style = useCssModule();

// 绩效删除
function handleTableDel(record, index) {
  let item = value.value.filter((_, i) => i !== index);
  if (item.find((t) => t.level2Code == record.level2Code)) {
    value.value = item;
  } else {
    props.field.children.forEach((t) => {
      if (['level2Code', 'level1Code'].indexOf(t.prop) === -1) {
        record[t.prop] = undefined;
      }
    });
  }
}
// 绩效添加
function handleTableAdd(record, index, copy = false) {
  let item: any = {
    level1Code: record.level1Code,
    level2Code: record.level2Code,
  };
  if (copy) {
    item = { ...record };
    delete item.id;
  }
  value.value.splice(index + 1, 0, item);
  value.value = value.value.slice();
}
</script>
<style module lang="scss">
.table {
  &:global {
    &.ant-table-wrapper .ant-table.ant-table-middle .ant-table-thead > tr > th {
      background-color: rgb(243, 249, 255);
      padding: 0px 8px;
      height: 47px;
    }
  }
  td {
    vertical-align: top;
  }
  .required {
    color: var(--error-color);
    margin-right: 4px;
  }
}
.actionIcons {
  display: flex;
  gap: 8px;
  color: var(--primary-color);
  font-size: 16px;
  height: 32px;
  align-items: center;
  cursor: pointer;
}
</style>
